<template>
  <div class="login_container">
    <div class="title">
      <h1>高校社团管理系统</h1>
    </div>
    <div class="login_box">
      <div class="select-login-method">
        <div class="userNameLogin">
          <LoginTabBarItem :is-active-visible="isPass" @item-click="passItemCLick">
            <div slot="item-text" class="divText">学生登录</div>
          </LoginTabBarItem>
        </div>
        <div class="mailLogin">
          <LoginTabBarItem :is-active-visible="isMail" @item-click="mailItemClick">
            <div slot="item-text" class="divText">教师登录</div>
          </LoginTabBarItem>
        </div>

      </div>
      <div style="margin-top: 30px" v-if="isPass">
        <!--      登录表单-->
        <el-form ref="loginFormRef" label-width="0px" :model="loginForm" :rules="loginFormRules" class="login_form">
          <!--        用户名-->
          <el-form-item prop="userName">
            <input class=" el-input__inner" v-model="loginForm.userName" prefix-icon="el-icon-user"
                   placeholder="账号"/>
          </el-form-item>
          <!--        密码-->
          <el-form-item prop="userPassword">
            <input class=" el-input__inner" type="password" v-model="loginForm.userPassword" placeholder="密码"
                   prefix-icon="el-icon-lock"/>
          </el-form-item>
          <!--        按钮-->
          <el-form-item class="btns">
            <el-button class="loginBtn" type="primary" @keyup.enter.native="login" @click="login">登录</el-button>
            <!--          <el-button type="info" @click="resetLoginForm">重置</el-button>-->
          </el-form-item>

        </el-form>
      </div>
      <div style="margin-top: 30px" v-if="isMail">
        <!--      登录表单-->
        <el-form ref="loginFormOfTRef" label-width="0px" :model="loginFormOfT" :rules="loginFormOfTRules"
                 class="login_form">
          <!--        用户名-->
          <el-form-item prop="userNameT">
            <input class="el-input__inner" v-model="loginFormOfT.userNameT" size="small"
                   placeholder="负责人账号"/>
          </el-form-item>
          <el-form-item prop="userPassword">
            <input class=" el-input__inner" type="password" v-model="loginFormOfT.userPasswordT" placeholder="密码"
                   prefix-icon="el-icon-lock"/>
          </el-form-item>
          <!--          <div style="display: flex;height: 42px;margin-bottom: 15px">-->
          <!--            <el-form-item prop="userPasswordT">-->
          <!--              <input class=" el-input__inner" v-model="loginFormOfT.userPasswordT" placeholder="6位验证码"-->
          <!--                     prefix-icon="el-icon-lock" style="width: 250px"/>-->
          <!--            </el-form-item>-->
          <!--            <el-button @click="senduserPasswordT" type="text" style="margin-left: 5px" size="medium"-->
          <!--                       :disabled="!getCodeVisible">{{ btnString }}-->
          <!--            </el-button>-->
          <!--          </div>-->
          <el-form-item class="btns">
            <el-button class="loginBtn" type="primary" @keyup.enter.native="loginT" @click="loginT">登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
<!--      <div style="font-size: 15px" class="signIn">-->
<!--        <span @click="signIn">注册账号</span>-->
<!--        <span> | </span>-->
<!--        <span @click="findPassword">忘记密码?</span>-->
<!--      </div>-->
    </div>
  </div>

</template>

<script>
import LoginTabBarItem from '../../components/tabbar/LoginTabBarItem'
import {login, getAdminInfo, loginT} from '@/api/login'
import {mapActions, mapState} from 'vuex'
import {mapMutations} from "vuex";

export default {
  name: 'Login',
  components: {
    LoginTabBarItem
  },
  data() {
    return {
      isMail: false,
      isPass: true,
      userToken: '',
      timeSeconds: 60,
      loginForm: {
        userName: '1840100',
        userPassword: '1840100'
      },
      loginFormOfT: {
        userNameT: '12345678',
        userPasswordT: '12345678'
      },
      // 表单验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        userName: [
          {required: true, message: '请输入登录账号', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],

        // 验证密码是否符合规则

        userPassword: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 6, max: 50, message: '长度不能少于6', trigger: 'blur'}
        ]
      },
      loginFormOfTRules: {
        userPasswordT: [
          {required: true, message: '请输入登录账号', trigger: 'blur'}
        ],
        userNameT: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ]
      }
    }
  },
  computed: {
    ...mapState(['adminInfo']),
  },
  mounted() {
  },
  methods: {
    // 切换登录方式
    mailItemClick() {
      this.isMail = true
      this.isPass = false
    },
    passItemCLick() {
      this.isMail = false
      this.isPass = true
    },
    // 点击重置表单
    resetLoginForm() {
      console.log(this)
      this.$refs.loginFormRef.resetFields()
    },
    signIn() {
      this.$router.push('/registered')
    },
    findPassword() {
      this.$router.push('/forgetPassword')
    },
    ...mapMutations(['changeLogin']),
    async login() {
      let v = this;
      let res;
      res = await login({
        username: this.loginForm.userName,
        password: this.loginForm.userPassword
      });
      if (res.code == 200) {
        console.log(res);
        this.$message({
          type: 'success',
          message: '登录成功'
        });
        console.log(res.data.id)
        window.sessionStorage.setItem('token', res.data.token);
        window.sessionStorage.setItem('id', res.data.id);
        await this.$router.push('/managerHome')
      } else {
        this.$message({
          type: 'error',
          message: "用户名或密码错误"
        });
      }
    },
    async loginT() {
      let v = this;
      let res;
      res = await loginT({
        username: this.loginFormOfT.userNameT,
        password: this.loginFormOfT.userPasswordT
      });
      if (res.code == 200) {
        console.log(res.state);
        this.$message({
          type: 'success',
          message: '登录成功'
        });
        console.log(res.data);
        window.sessionStorage.setItem('token', res.data);
        await this.$router.push('/managerHomeT')
      } else {
        this.$message({
          type: 'error',
          message: "用户名或密码错误"
        });
      }
    }

  }

}
</script>

<style Lang="less" scoped>

.userNameBtn {
  width: 352px;
  outline: none;
}

.select-login-method {
  display: flex;
  width: 100%;
  padding: 10px;
}

.userNameLogin {
  display: flex;
  justify-items: center;
  font-size: 20px;
}

.mailLogin {
  margin-left: 40px;
  display: flex;
  text-align: center;
  font-size: 20px;
}

.login_container {
  background-color: #eaecef;
  height: 100%;
}

.title {
  color: #1a1919;
  font-size: 30px;
  position: absolute;
  left: 25%;
  top: 38.2%;
  transform: translate(-50%, -50%);
}

.login_box {
  width: 400px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  position: absolute;
  left: 75%;
  top: 38.2%;
  transform: translate(-50%, -50%);
}

.login_form {
  position: absolute;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.loginBtn {
  margin-top: 20px;
  width: 350px;
  height: 40px;
  line-height: 10px;
  border: none;
  text-align: center;
  background-color: #ef4b3e;
  cursor: pointer;
  padding-left: 13px;
  border-radius: 5px;
  outline: none;
  color: #eeeeee;
}

.signIn {
  position: absolute;
  right: 0%;
  top: 90%;
  transform: translate(-100%, -50%);
  cursor: pointer;
}

.el-input__inner {
  width: 350px;
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 1px;
  border-radius: 0;
  height: 30px;
  font-size: 15px;
  /*outline: medium;*/
}

</style>
